<template>
  <div class="title">
    <div class="icon-wrapper" @click="toDetailsPage">
      <Icon name="left" class="left"></Icon>
    </div>
    <a-dropdown>
      <a class="ant-dropdown-link" @click="e => e.preventDefault()">
        {{type==="+"?'收入':'支出'}}<Icon name="rightDown" class="rightDown"></Icon>
      </a>
      <a-menu slot="overlay" @click="onClick">
        <a-menu-item key="-">
          <Icon name="payout"></Icon><span style="padding: 0 5px">支出</span>
        </a-menu-item>
        <a-menu-item key="+">
          <Icon name="income"></Icon><span style="padding: 0 5px">收入</span>
        </a-menu-item>
      </a-menu>
    </a-dropdown>
  </div>
</template>

<script lang="ts">
  import Vue from 'vue';
  import { Component, Prop } from 'vue-property-decorator';
  import { Dropdown, Menu } from 'ant-design-vue';

  Vue.use(Dropdown);
  Vue.use(Menu);

  @Component({
    components: {Dropdown, Menu}
  })
  export default class Title extends Vue {
    @Prop({required: true}) type!: string

    onClick({ key: key }: { key: string }) {
      this.$emit('update:type', key)
      this.$store.state.cur_record.tag = key==='+'?{ id: '30', text: '工资', name: 'salary'}:{ id: '0', text: '一般', name: 'default'};
    }

    toDetailsPage() {
      this.$router.back();
    }
  }
</script>

<style lang='scss' scoped>
  .title {
    padding: 5px 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-bottom: 1px solid #E6E6E6;

    > .icon-wrapper {
      padding: 6px 10px;
      display: flex;
    }

    > .ant-dropdown-link{
      color: #333333;
      > .rightDown {
        width: 8px;
        height: 8px;
        color: #E1E1E1;
      }
    }
  }
</style>